<template>
  <layout title="button按钮">

    <layout-content title="基础使用">
      <tn-button :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button shape="round" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button shape="circle" :custom-style="customButtonStyle">
        <tn-icon icon="logo-tuniao"></tn-icon>
      </tn-button>
    </layout-content>

    <layout-content title="设置尺寸">
      <tn-button size="sm" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button :custom-style="customButtonStyle">默认</tn-button>
      <tn-button size="lg" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button size="xl" :custom-style="customButtonStyle">按钮</tn-button>
      <view class="tn-margin-top-sm">
        <tn-button shape="round" size="sm" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button shape="round" :custom-style="customButtonStyle">默认</tn-button>
        <tn-button shape="round" size="lg" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button shape="round" size="xl" :custom-style="customButtonStyle">按钮</tn-button>
      </view>
      <view class="tn-margin-top-sm">
        <tn-button shape="circle" size="sm" :custom-style="customButtonStyle"><tn-icon icon="logo-tuniao"></tn-icon></tn-button>
        <tn-button shape="circle" :custom-style="customButtonStyle"><tn-icon icon="logo-tuniao"></tn-icon></tn-button>
        <tn-button shape="circle" size="lg" :custom-style="customButtonStyle"><tn-icon icon="logo-tuniao"></tn-icon></tn-button>
        <tn-button shape="circle" size="xl" :custom-style="customButtonStyle"><tn-icon icon="logo-tuniao"></tn-icon></tn-button>
      </view>
      <view class="tn-margin-top-sm">
        <tn-button width="100" height="50" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button width="100" height="50" font-bold :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button shape="circle" font-size="40" :custom-style="customButtonStyle"><tn-icon icon="logo-tuniao"></tn-icon></tn-button>
      </view>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-button type="primary" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button type="success" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button type="warning" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button type="danger" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button type="info" :custom-style="customButtonStyle">按钮</tn-button>
      <view class="tn-margin-top-sm">
        <tn-button bg-color="tn-bg-indigo" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button bg-color="tn-bg-indigo--light" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button bg-color="tn-bg-indigo--light" color="tn-color-blue" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button bg-color="#91F7C1" color="#31C9E8" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button bg-color="tn-cool-bg-6" :custom-style="customButtonStyle">按钮</tn-button>
      </view>
    </layout-content>

    <layout-content title="设置边框">
      <tn-button plain border type="primary" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button plain border type="success" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button plain border type="warning" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button plain border type="danger" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button plain border type="info" :custom-style="customButtonStyle">按钮</tn-button>
      <view class="tn-margin-top-sm">
        <tn-button plain border border-color="tn-border-blue" color="tn-color-blue" :custom-style="customButtonStyle">按钮</tn-button>
        <tn-button plain border border-bold border-color="tn-border-blue" color="tn-color-blue" :custom-style="customButtonStyle">按钮</tn-button>
      </view>
    </layout-content>

    <layout-content title="设置阴影">
      <tn-button shadow type="primary" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button shadow type="success" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button shadow type="warning" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button shadow type="danger" :custom-style="customButtonStyle">按钮</tn-button>
      <tn-button shadow type="info" :custom-style="customButtonStyle">按钮</tn-button>
      <view class="tn-margin-top-sm">
        <tn-button plain border shadow border-color="tn-border-blue" color="tn-color-blue" shadow-color="tn-shadow-blue" :custom-style="customButtonStyle">按钮</tn-button>
      </view>
    </layout-content>

    <layout-content title="其他用法">
      <tn-button disabled :custom-style="customButtonStyle">禁止点击</tn-button>
      <tn-button loading :custom-style="customButtonStyle">正在加载</tn-button>
      <view class="tn-margin-top-sm">
        <tn-button open-type="feedback" :custom-style="customButtonStyle">打开反馈页面</tn-button>
        <tn-button open-type="share" :custom-style="customButtonStyle">分享小程序</tn-button>
      </view>
    </layout-content>

  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref, CSSProperties } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'

// 自定义样式
const customButtonStyle: CSSProperties = {
  marginRight: '20rpx',
  marginTop: '20rpx',
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>
</style>
